{% extends 'preheat/base.html' %}

{% block title %}自动任务管理 - CDN预热平台{% endblock %}

{% block page_title %}自动任务列表{% endblock %}

{% block content %}
<div class="mb-4 btn-group">
    <a href="{% url 'preheat:auto_task_create' %}" class="btn btn-primary btn-fixed-width">添加自动任务</a>
    <form method="post" action="{% url 'preheat:restart_scheduler' %}" style="display: inline;">
        {% csrf_token %}
        <button type="submit" class="btn btn-warning" onclick="return confirm('确定要重启调度器吗？这将重新加载所有激活的自动任务。')">
            <i class="fas fa-sync-alt"></i> 重启调度器
        </button>
    </form>
</div>

<div class="card">
    <div class="card-header">
        <h3>自动任务清单</h3>
    </div>
    <div class="card-body">
        {% if tasks %}
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>任务类型</th>
                        <th>执行间隔</th>
                        <th>状态</th>
                        <th>上次执行时间</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in tasks %}
                    <tr>
                        <td>{{ task.name }}</td>
                        <td>{{ task.get_task_type_display }}</td>
                        <td>{{ task.interval }} {{ task.get_task_type_display }}</td>
                        <td>
                            {% if task.is_active %}
                            <span class="badge badge-success task-status" data-task-id="{{ task.id }}" data-status="enabled">已激活</span>
                            {% else %}
                            <span class="badge badge-secondary task-status" data-task-id="{{ task.id }}" data-status="disabled">已禁用</span>
                            {% endif %}
                        </td>
                        <td>{{ task.last_executed_time|date:'Y-m-d H:i:s'|default:'从未执行' }}</td>
                        <td>{{ task.created_time|date:'Y-m-d H:i:s' }}</td>
                        <td>{{ task.updated_time|date:'Y-m-d H:i:s' }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'preheat:auto_task_detail' task.id %}" class="btn btn-info">查看详情</a>
                                <a href="{% url 'preheat:auto_task_delete' task.id %}" class="btn btn-danger" onclick="return confirm('确定要删除该自动任务吗？')">删除</a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-center text-muted">暂无自动任务数据，请点击"添加自动任务"按钮添加任务。</p>
        {% endif %}
    </div>
</div>
{% endblock %}

<style>
/* 任务状态span点击样式 */
.task-status {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.task-status:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<script>
$(document).ready(function() {
    // 处理任务状态span的点击事件
    $('.task-status').on('click', function() {
        var $span = $(this);
        var taskId = $span.data('task-id');
        var currentStatus = $span.data('status');
        
        // 确定新的状态
        var newStatus = currentStatus === 'enabled' ? 'disabled' : 'enabled';
        var newText = newStatus === 'enabled' ? '已激活' : '已禁用';
        var newClass = newStatus === 'enabled' ? 'badge badge-success' : 'badge badge-secondary';
        
        // 发送AJAX请求更新任务状态
        $.ajax({
            url: '/api/auto-task/' + taskId + '/toggle-status/',
            method: 'POST',
            data: {
                'status': newStatus,
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                if (response.success) {
                    // 更新span元素
                    $span.removeClass('badge badge-success badge badge-secondary')
                          .addClass(newClass)
                          .text(newText)
                          .data('status', newStatus);
                } else {
                    alert('状态更新失败: ' + response.message);
                }
            },
            error: function(xhr) {
                alert('请求失败，请稍后重试');
            }
        });
    });
});
</script>